<template>
  <div class="video-box" :class="isMobile ? 'mobile-video-box' : ''">
    <template v-if="obj.url">
      <div class="video-box-cont" v-if="obj.id && playType==='VIDEO'" :class="{'hide-loading': showPlayBtn}" @click.stop="playVideo">
        <video
          muted
          class="video-js"
          preload='none'
          :id="obj.id"
          :poster="obj.photo || imgBg">
          <source :src="obj.url" :type="videoType"/>Your browser does not support the video tag.
        </video>
        <div v-show="showPlayBtn" class="play-btn" @click.stop="playVideo"><i class="el-icon-caret-right"></i></div>
        <div class="close-mark" v-show="!showPlayBtn" @click.stop="pauseVideo"></div>
      </div>
      <iframe v-if="playType==='HTML'" :src="obj.url.includes('?') ? obj.url+'&size=f' : obj.url" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
    </template>
    <template v-else>
      <div class="empty-box" :style="{'background-image': `url('${obj.photo || imgBg}')`}">
        <X-empty class="i-empty-bg" style="height: 100%" tip="暂无视频"/>
      </div>
    </template>
  </div>
</template>
<script>
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  export default {
    name: 'videoPlayer',
    props: {
      obj: {
        type: Object // id,url,photo
      },
      playType: {
        type: String,
        default: 'VIDEO'
      },
      autoPlay: {
        type: Boolean,
        default: true
      },
      controls: {
        type: Boolean,
        default: true
      },
      isLoop: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        imgBg: require('@/assets/images/mask.png'),
        player: null,
        typeMap: {
          'mp4': 'video/mp4',
          'ogg': 'video/mp4',
          'm3u8': 'application/x-mpegURL'
        },
        videoType: '',
        showPlayBtn: true,
        firstStatus: null,
        isPlay: false,
        isMobile: false,
      };
    },
    created (){
      if(this.Common.isMobile()){
        this.isMobile = true;
      }else {
        this.isMobile = false;
      }
    },
    mounted () {
      if (this.playType === 'VIDEO' && this.obj.url) {
        this.playerFun();
      }
      this.showPlayBtn = !this.autoPlay;
    },
    methods: {
      playerFun () {
        // 获取视频资源的文件扩展名
        let s = this.obj.url || '';
        let arr = s.split('.');
        let type = arr[arr.length - 1];
        this.videoType = this.typeMap[type] || 'application/x-mpegURL';
        let vm = this;
        if (videojs.getPlayers()[this.obj.id]) {
          videojs.getPlayers()[this.obj.id].dispose();
        }
        this.player = videojs(this.obj.id, {
          sources: [{
            src: this.obj.url,
            type: this.videoType
          }],
          autoplay: this.autoPlay,
          controls: this.controls,
          bigPlayButton: false,
          resizeManager: false,
          textTrackDisplay: false,
          textTrackSettings: false,
          errorDisplay: false,
          loop: false // 是否循环播放
          // fluid: true // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        }, function onPlayerReady () {
          this.on('ended', function () {
            if (!vm.isLoop) {
              vm.showPlayBtn = true;
            }
            // 结束时设置学习状态
            vm.$emit('setStudyStatus', Math.ceil(videojs.getPlayers()[vm.obj.id].currentTime()))
          });
          this.on('pause', function (e) {
            if (!vm.obj.url) {
              return;
            }
            vm.showPlayBtn = true;
            this.pause();
            vm.pauseFunc(e);
          });
          this.on('play', function (e) {
            if (!vm.obj.url) {
              return;
            }
            vm.showPlayBtn = false;
            vm.isPlay = true;
            vm.playFunc(e);
          });
          this.on('enterpictureinpicture', function () {
            this.isEnterpictureinpicture = true;
          });
          this.on('leavepictureinpicture', function () {
            this.isEnterpictureinpicture = false;
          });
        }).ready(() => {
        });
      },
      playVideo () {
        if (!this.obj.url) {
          return;
        }
        this.showPlayBtn = false;
        videojs.getPlayers()[this.obj.id].play();
      },
      pauseVideo () {
        if (!this.obj.url) {
          return;
        }
        this.showPlayBtn = true;
        videojs.getPlayers()[this.obj.id].pause();
      },
      /**
       * 暂停
       **/
      pauseFunc(e){
        // 暂停时当前时长
        // this.$emit('videoCurrentTime', Math.round(e.target.player.cache_.currentTime))
      },
      /**
       * 播放
       **/
      playFunc(e){
        this.$emit('playVideo', e)
      },
      /**
       * video控件
       **/
      getVideoWrap(){
        return videojs.getPlayers()[this.obj.id]
      },
      switchVideo(url){
        videojs.getPlayers()[this.obj.id].src(url)
      },
      setPlayBtnShow(){
        this.showPlayBtn = true;
      },
      /**
       * 设置播放进度
       **/
      setSchedule(time){
        videojs.getPlayers()[this.obj.id].currentTime(time);
      },
    },
    beforeDestroy () {
      if (videojs.getPlayers()[this.obj.id]) {
        if (!!videojs.getPlayers()[this.obj.id].isEnterpictureinpicture) {
          videojs.getPlayers()[this.obj.id].exitPictureInPicture();
        }
        videojs.getPlayers()[this.obj.id].dispose();
      }
    }
  };
</script>
<style lang="scss">
  .icon {
    width: 1em;
    height: 1em;
    /* vertical-align: -0.15em; */
    vertical-align: top;
    fill: currentColor;
    overflow: hidden;
  }
  .video-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .el-loading-mask{
      background: none;
    }
    .video-box-cont {
      background: #000;
    }
    .video-box-cont,
    .video-js{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .play-btn{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4rem;
      height: 0.4rem;
      line-height: 1;
      text-align: center;
      transform: translate(-50%, -50%);
      font-size: .5rem;
      color: #fff;
      background: rgba(51, 51, 51, 0.3);
      border-radius: 50%;
      cursor: pointer;
      i {
        font-size: 0.24rem;
        vertical-align: top;
        margin-top: 0.08rem;
      }
    }
    iframe {
      position: absolute;
      z-index: 0;
      background: #000;
    }
    .empty-box{
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .close-mark {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 3em;
    }
    .hide-loading {
      .vjs-loading-spinner {
        display: none;
      }
    }
  }
  .mobile-video-box{
    .play-btn{
      height: 1.4rem;
      width: 1.4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-icon-caret-right{
        font-size: 1.24rem;
      }
    }
  }
</style>
